$(function () {
    $(document).ready(function(){
        /*添加转场*/
        $('.left_menu').animate({left: 30},800);
        $('.personal_menu').animate({left: 10},800);
        $('.content').animate({top: 70},800);
        $('#showMain').animate({top: 0},800);

        /*-----------------图片懒加载----------------*/

        $('.lazy').lazyload({
            //图片显示时淡入效果
            effect: "fadeIn",
            //没有加载图片时的临时占位符
            placeholder: "/static/image/lazy3.gif",
            //图片在距离屏幕 200 像素时提前加载.
            threshold: 200,
            //将图片加载放进click事件中（不常用）
            event: "scroll",
            //加载隐藏的图片（不常用）
            skip_invisible: false
            //其他配置项请查看官网
        });

        $(window).scroll(function () {
            // console.log($("html,body").scrollTop());
            var offset = $("html,body").scrollTop();
            //判断网页是否移动到了位置
            if(offset >= 300){
                $("#control_top").fadeIn();
            }else{
                $("#control_top").fadeOut();
            }
        })
    })

    $("#controlNav").on("click",function () {
        $("#navSonRight>div").fadeToggle();
        $(".content").fadeToggle();
    })


    /*弹出框*/
    function popup(idA,idB){
        $(idA).mouseenter(function () {
            //鼠标移入
            $(idB).stop().slideDown();

        }).mouseleave(function () {
            //鼠标移除
            $(idB).stop().slideUp();
        })
    }
    /*user card 弹出框*/
    popup("#userCard",".user_card");
    /*探索*/
    // popup("#spreadMore",".spread");


    /*选中效果*/
    function select(className){
        $(className).mouseenter(function () {
            // $(this).animate({
            //     opacity: 0.6,
            // },500)
            $(this).parents(".image_list").css("transform","scale(1.05)")
            $(this).parents(".image_list").css("border","2px solid black")
            $(this).css("transform","scale(1.2)")
        }).mouseleave(function () {
            // $(this).animate({
            //     opacity: 1,
            // },500)
            $(this).parents(".image_list").css("transform","scale(1)")
            $(this).parents(".image_list").css("border","none")
            $(this).css("transform","scale(1)")
        })
    }
    select('.lazy');
    select('.list_nav>ul>li');


    /*按钮选中*/
    $(".left_menu_content").mouseenter(function () {
        $(this).css("background","#B2DCEA");
    }).mouseleave(function () {
        $(this).css("background","");
    })

    /*按钮选中*/
    $(".left_menu_top a").mouseenter(function () {
        $(this).css("background","#B2DCEA");
    }).mouseleave(function () {
        $(this).css("background","");
    })

    /*回到顶部*/
    $("#control_top").click(function () {
        $("html,body").scrollTop(0);
    })
    /*--------------------------------点击图片详情---------------------*/
    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function(){
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });

        $(outerdiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }

    $("#DetailControl").click(function () {
        var _this = $(this);//将当前的pimg元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });



    $("#switchImage").click(function () {
        $(this).children("img").toggleClass("switch_image_on").toggleClass("switch_image_off");
        $("#bullet").fadeToggle();
    })

    /*切换到配文*/
    $("#controlChangeToContent").click(function () {
        $("#changeToReview div").fadeOut();
        $("#changeToContent div").fadeIn();
    })
    /*切换到评论*/
    $("#controlChangeToReview").click(function () {
        $("#changeToContent div").fadeOut();
        $("#changeToReview div").fadeIn();
    })


    // function run(){
    //     var bar = document.getElementById("progressBar");
    //     var total = document.getElementById("total");
    //     bar.style.width=parseInt(bar.style.width) + 1 + "%";
    //     total.innerHTML = bar.style.width;
    //     if(bar.style.width == "100%"){
    //         window.clearTimeout(timeout);
    //         return;
    //     }
    //     var timeout=window.setTimeout("run()",1000);
    // }


    /*ajax上传*/
    $("#submitImage").click(function(){
        var show = $.trim($('#isShow').prop("value"));
        var image_class = $.trim($('#imageClassName').val());
        var content = $('#myContent').val();
        var image_value = $('#file_input');
        var image = image_value[0].files[0];
        if(image_class===" " || content === " " || image_value.val() === ""){
            $(".hint span").text("请填写完整！");
            $(".hint").fadeIn();
            return false;
        }
        $(".content").addClass("dim").after("<div id='uploading' " +
            "style=\"position: fixed; top: 50%; width: 100%; text-align: center\">\n" +
            "    <img  style='position: relative;top: 50%; align-self: center' " +
            "src='/static/image/lazy1.gif'>\n" +
            "</div>");
        var form = new FormData();
        form.append("show", show);
        form.append("image_class",image_class);
        form.append("content",content);
        form.append("image", image);

        // 上传图片到后台返回并显示。
        $.ajax({
            url: "/user/uploadThis",
            type: "post",
            data: form,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            // dataType: "json",
            success: function(data) {
                console.log(data);
                if(data === "1"){
                    alert("上传成功");
                    location.reload();
                }else if(data === "-1"){
                    alert("已经上传了这张图片了哦");
                    $("#uploading").remove();
                    $(".content").removeClass("dim");
                }else{
                    alert("上传失败");
                    $("#uploading").remove();
                    $(".content").removeClass("dim");
                    console.log(data);
                }
            },
            error:function () {
                alert("上传请求失败");
                $("#uploading").remove();
                $(".content").removeClass("dim");
            }
        })
    })


    /*ajax修改显示在首页*/
    $("#controlShow").click(function () {
        alert("图片已展示在首页");
    })

    $("#controlHidden").click(function () {
        alert("图片已不再展示在首页");
    })


    $("#DelImage").click(function () {
        var r=confirm("确认删除")
        if (!r===true)
        {
            return false;
        }
    })


    function switch_control(idName) {
        /*switch开关--展示图片*/
        var switch_is_on= 1;        /*关闭*/
        $(idName).click(function () {
            if(!switch_is_on){
                $(idName+">div>div").removeClass("switch_off").addClass("switch_on").text("ON");
                $("#isShow").attr("value","true");
                switch_is_on = 1;
            }else if(switch_is_on){
                $(idName+">div>div").removeClass("switch_on").addClass("switch_off").text("OFF");
                $("#isShow").attr("value", "false");
                switch_is_on = 0;
            }else{
                return 0;
            }
        })
    }
    switch_control("#switch_show")


    /*喜欢  点赞*/
    $(".like_this").on("click",function () {
        var this_image = $(this);
        var name =  $(this).attr("value");
        $.ajax({
            url: "/user/likeIt",
            type: "get",
            data: {"id":name},
            success:function (data) {
                if(true===data){
                    this_image.attr("src","/static/image/like2.png");
                    this_image.parent().find("span").text(parseInt(this_image.parent().text())+1);
                }else if(false === data){
                    this_image.attr("src","/static/image/like1.png");
                    this_image.parent().find("span").text(parseInt(this_image.parent().text())-1);

                }
            },
            error:function () {
                alert("请求错误")
            }
        })
    })


    /*退出确认*/
    $(".exitConfirm").click(function () {
        var exit = confirm("确认退出？")
        if(true === exit){
            alert("已退出！");
        }else {
            return false;
        }
    })

    /*首页排名信息版*/
    $(".rankImage").mouseenter(function () {
        $(this).children("img").fadeIn();
    }).mouseleave(function() {
        $(this).children("img").fadeOut();
    })

    /*as*/
    $("#changeLookClass").click(function () {
        $("#uploadListSmall").fadeToggle();
        $("#uploadList").fadeToggle();
    })

    /*清空回收站*/
    $(".clearThis").click(function () {
        $.ajax({
            url: "/user/deleteAll",
            type: "get",
            success:function (data) {
                if(data){
                    alert("清空回收站成功");
                    location.reload();
                }else{
                    alert("回收站是干净的");
                }
            },
            error:function () {
                alert("清空失败");
            }
        })
    })


    $("#controlPreview").click(function () {
        $.ajax({
            url: "/parseMarkdown",
            type: "get",
            data: {"content": $("#myContent").val()},
            success:function (data) {
                $("#previewContent").html(data);
            },
            error:function () {
                alert("服务器繁忙");
            }
        })
    })

    $("#changeClass").click(function () {
    $.ajax({
            url: "/changeImageClass",
            type: "get",
            data: {"image_url": $("#myContent").val()},
            success:function (data) {

            },
            error:function () {
                alert("服务器繁忙");
            }
        })
    })

    /*单张上传与批量上传*/
    function changeButton(btnIn,btnOut){
        $(btnOut).click(function () {
            $(this).fadeOut();
            $(btnIn).fadeIn();
            $("#uploadOne").fadeToggle();
            $("#uploadBatch").fadeToggle();
        })
    }
    changeButton("#oneUpload","#batchUpload")
    changeButton("#batchUpload","#oneUpload")

    /*------------------------------------------评论-------------------------------*/

    $("#sendMsg").click(function () {
        msg = $("#sendMess");
        $.ajax({
            url: "/user/review/"+$("#details_md5").val(),
            type:"GET",
            data: {'msg':msg.val()},
            success:function (data) {
                if(data !== null){
                    $("#reviewThis").prepend("<li style='display: none' class=\"review_one flow\">\n" +
                                                data[data.length-1]['name'] +
                        "                        <div>\n" +
                        "                            <img src=\"\" width=\"10px\" alt=\"\">\n" +
                        "                        </div>\n" +
                        "                        <br>\n" +
                        "                        <div>\n"+ msg.val() +
                        "                        </div>\n" +
                        "                    </li>").children("li").fadeIn(1000);
                    msg.val("");
                }else{
                    alert("评论失败");
                }

            },
            error:function (err) {
                console.log(err);
            }
        })
    })

    /*评论输入框*/
    $("#sendMess").focusin(function () {
        $(this).animate({height:200},500);
    }).focusout(function () {
        $(this).animate({height:30},500);

    })

})